<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">
    <mat-toolbar>Menu</mat-toolbar>
    <!-- sidebar list -->
    <mat-nav-list>
      <a mat-list-item routerLink="table" routerLinkActive="active">表格</a>
    </mat-nav-list>
    <!-- sidebar list end -->
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button type="button" aria-label="Toogle sidenav" mat-icon-button (click)="drawer.toggle()">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      
      <span>Angular Materail</span>

      <!-- nav -->
      <div class="links">
        <button mat-button routerLink="home" routerLinkActive="active">
          <span>Home</span>
        </button>
      </div>
      <!-- nav end -->
    </mat-toolbar>

    <!-- router outlet -->
    <div class="container">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>